<template>
  <div>
    <SearchForm @search="getTableData" @reset="clearSearch" :is-search-disabled="isSearchDisabled">
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')">
          <el-input v-model="page.name"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')">
          <el-input v-model="page.phone"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('跟进次数')">
          <el-input v-model="page.followNum" class="input-with-select">
            <el-select style="width: 60px" v-model="page.followType"
                       slot="prepend">
              <el-option v-for="item in symbolList" :key="item.label" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <el-button slot="append">{{ $t('次') }}</el-button>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[635]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.loanProductName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('订单状态')">
          <el-select style="width: 100%" v-model="page.approvalResult" clearable>
            <el-option v-for="item in orderStatus" :key="item.key" :label="item.value"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('分单时间')">
          <el-date-picker
              v-model="page.createdTimeValue"
              style="width: 100%"
              unlink-panels
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('注册时间')">
          <el-date-picker
              v-model="page.registerTimeValue"
              style="width: 100%"
              unlink-panels
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('跟进时间')">
          <el-date-picker
              v-model="page.followTimeValue"
              style="width: 100%"
              unlink-panels
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('申请时间')">
          <el-date-picker
              v-model="page.applyTimeValue"
              style="width: 100%"
              unlink-panels
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card style="margin-top: 10px" shadow="never">
      <Table :table-column="tableColumn" :page="page" @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange"
             :oading="loading"
             :table-data="tableData">
        <template slot="isBlack" slot-scope="{row}">
          {{ row.isBlackList === 0 ? $t('否') : row.isBlackList === 1 ? $t('是') : '' }}
        </template>
        <template slot="handle" slot-scope="{row}">
          <el-button type="text" @click="remarkDetails(row)" v-show="$permiss[642]">{{ $t('备注详情') }}</el-button>
        </template>
      </Table>
    </el-card>
    <!--    备注详情-->
    <Dialog :visible.sync="visibleDetails" :title="$t('详情')" width="60%" :footer="false">
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :label="$t('跟进时间')">
              <el-date-picker
                  v-model="detailsPage.timeValue"
                  style="width: 100%"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="~"
                  :start-placeholder="$t('开始时间')"
                  :end-placeholder="$t('结束时间')">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right;float: right">
            <el-button type="primary" @click="getRemarkDetails">{{ $t('查询') }}</el-button>
            <el-button @click="detailsPage.timeValue = null,getRemarkDetails()">{{ $t('重置') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table :table-data="detailsTableData" :page="detailsPage" @handleSizeChange="detailsSizeChange"
             @handleCurrentChange="detailsPageChange" :table-column="detailsTableColumn">
        <template slot="result" slot-scope="{row}">
          <div v-if="row.cause1 && row.cause1">
            {{ row.cause1 + '-' + row.cause2 }}
          </div>
        </template>
      </Table>
    </Dialog>
  </div>
</template>

<script>
import {selectProduct, selectMarketingStaff} from "@/api/system";
import {flowDoneList,flowRemarksList} from '@/api/marketing'
import {dateFormatSection} from '@/utils/tools'
export default {
  name: "RegisterNotApplyHistory",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        followType: '=',
      },
      productList: [],
      marketList: [],
      tableColumn: [
        {label: this.$t('用户姓名'), prop: 'name', align: 'center'},
        {label: this.$t('手机号码'), prop: 'phone', align: 'center', minWidth: 100,},
        {label: this.$t('邮箱'), prop: 'email', minWidth: 100},
        {label: 'whatsAPP', prop: 'whatsApp', minWidth: 100},
        {label: 'zalo', prop: 'zalo', minWidth: 100},
        {label: this.$t('是否黑名单'), slot: 'isBlack', minWidth: 100},
        {label: this.$t('性别'), prop: 'gender', align: 'center'},
        {label: this.$t('年龄'), prop: 'age', align: 'center'},
        {label: this.$t('APP名称'), prop: 'appName', align: 'center', width: 150},
        {label: this.$t('分单时间'), prop: 'createTime', align: 'center', width: 150},
        {label: this.$t('注册时间'), prop: 'creationTime', align: 'center', width: 150},
        {label: this.$t('申请时间'), prop: 'loanTime', width: 150},
        {label: this.$t('订单状态'), prop: 'approvalResult', minWidth: 100},
        {label: this.$t('跟进次数'), prop: 'followNum', align: 'center'},
        {label: this.$t('跟进时间'), prop: 'inputTime', align: 'center', width: 150},
        {
          label: this.$t('操作'),
          align: 'center',
          slot: 'handle',
          width: 150,
          fixed: 'right',
          isHide: !this.$permiss[642]
        },
      ],
      tableData: [],
      symbolList: [
        {label: '>', value: '>'},
        {label: '=', value: '='},
        {label: '≧', value: '>='},
        {label: '≦', value: '<='},
        {label: '<', value: '<'}
      ],
      loading:false,
      visibleDetails: false,
      detailsPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      orderStatus: [
        {key: -1, value: this.$t('已关闭'), color: '#5e5e5e'},
        {key: 0, value: this.$t("未分配"), color: '#1200ff'},
        {key: 1, value: this.$t("审核中"), color: "#6e00cd"},
        {key: 2, value: this.$t("拒绝"), color: "#f579df"},
        {key: 5, value: this.$t("待打款"), color: "#06d506"},
        {key: 6, value: this.$t("待还款"), color: "#ffc000"},
        {key: 8, value: this.$t("逾期"), color: "#ff0000"},
        {key: 9, value: this.$t("结清"), color: "#53aef3"},
      ],
      detailsTableData: [],
      detailsTableColumn: [
        {label: this.$t('跟进时间'), prop: 'inputTime'},
        {label: this.$t('营销结果'), slot: 'result'},
        {label: this.$t('备注'), prop: 'remark'},
        {label: this.$t('处理人'), prop: 'inputName'},
      ],
      isSearchDisabled: false
    }
  },
  mounted() {
    this.getSelect()
    this.getTableData()
  },
  methods: {
    async getTableData() {
      this.isSearchDisabled = true
      const {applyTimeValue, registerTimeValue, followTimeValue, createdTimeValue} = this.page
      const [applyStartTime, applyEndTime] = dateFormatSection(applyTimeValue)
      const [registerStartTime, registerEndTime] =dateFormatSection(registerTimeValue)
      const [followStartTime, followEndTime] = dateFormatSection(followTimeValue)
      const [datetimeStart, datetimeEnd] = dateFormatSection(createdTimeValue)
      const params = {
        ...this.page,
        applyStartTime,
        applyEndTime,
        registerStartTime,
        registerEndTime,
        followStartTime,
        followEndTime,
        datetimeStart, datetimeEnd
      }
      delete params.applyTimeValue
      delete params.registerTimeValue
      delete params.followTimeValue
      delete params.createdTimeValue
      this.loading = true
      const res = await flowDoneList(params)
      if (res.code === 1) {
        const {list,total} = res.data
        this.tableData = list.map(item => {
          const approvalResult = this.orderStatus.filter(v => v.key === parseInt(item.approvalResult))
          item.gender = item.gender === 1 ? this.$t('男') : item.gender === 0 ? this.$t('女') : ''
          item.approvalResult = approvalResult && approvalResult.length ? approvalResult[0].value : ''
          return item
        })
        this.page = {...this.page, total}
        this.isSearchDisabled = false
        this.loading = false
      } else {
        this.isSearchDisabled = false
        this.loading = false
      }
    },
     getSelect() {
      selectProduct().then(res => {
        this.productList = res.data
      })
      selectMarketingStaff({type: 3}).then(res => {
        this.marketList = res.data
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        followType: '=',
      }
      this.getTableData()
    },
    // 备注详情
    async remarkDetails(row = {}) {
      this.detailsPage.userId = row.userId
      await this.getRemarkDetails()
      this.visibleDetails = true
    },
    // 获取备注详情列表
    async getRemarkDetails() {
      const {timeValue} = this.detailsPage
      const [followTimeStart,followTimeEnd] = dateFormatSection(timeValue)
      const params = {
        ...this.detailsPage,
        followTimeStart,followTimeEnd
      }
      delete params.timeValue
      const res = await flowRemarksList(params)
      if (res.code === 1) {
        const {list, pageNum, pageSize, total} = res.data
        this.detailsTableData = list
        this.visibleDetails = true
        this.detailsPage = {...this.detailsPage, pageNum, pageSize, total}
      }
    },
    detailsPageChange(val) {
      this.detailsPage.pageNum = val
      this.getRemarkDetails()
    },
    detailsSizeChange(val) {
      this.detailsPage.pageSize = val
      this.getRemarkDetails()
    },
  }
}
</script>

<style scoped>
.auth {
  font-size: 22px !important;
  margin-right: 10px;
}

.auth_active {
  color: #F1B901 !important;
}
</style>
